<template name="myBar">
	<view class="myBarBox" :style="{'opacity':opacity}" >
		<statusBar></statusBar>
		<view class="barBox">
			<image class="userAvat" :src="(userInfo&&userInfo.pic)?userInfo.pic:'../../static/userPic.png'" data-url="setting" @tap="toNewPage"></image>
			<text class="userNick" @tap="toNewPage" data-url="setting">{{isLogin?userInfo.nickname:'未登录'}}</text>
			<image class="setting" src="../../static/setting.png" @tap="toPage" data-url="setting">
		</view>
	</view>
</template>

<script>
	import {mapState} from "vuex";
	import statusBar from "@/components/statusBar/statusBar.vue";
	export default{
		computed:{
			...mapState({
				userInfo: state => state.user.userInfo,
				isLogin: state => state.user.isLogin
			})
		},
		name:'myBar',		//组件名称
		// 传递参数
		props:{
			opacity:{
				type:String,
				default:'0'
			}
		},
		// 组件参数
		data(){
			return {
				
			}
		},
		// 组件方法
		methods:{
			toNewPage(e) {
				if (this.isLogin) {
					this.toPage(e)
				} else {
					this.toPage("login")
				}
			},
		}
	}
</script>

<style lang="less">
	.myBarBox{
		position: fixed;
		width: 100%;
		background-color: #ffcd11;
		z-index: 9;
		.barBox{
			display: flex;
			height: 90upx;
			line-height: 90upx;
			align-items: center;
			width: 100%;
			padding: 0 35upx 0 35upx;
			.userAvat{
				width: 70upx;
				height: 70upx;
				flex-shrink: 0;
				border-radius: 50%;
				margin-right: 20upx;
			}
			text{
				font-size: 32upx;
				flex-grow: 1;
			}
			.setting{
				width: 50upx;
				height: 50upx;
			}
		}
	}
</style>
